<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drag and Drop images</title>

    <script language="JavaScript">

    var srcElementId; //Id of dragged object

    var destElementId; //Id of valid drop target object   

        

    function dragstart(o,e){

        srcElementId = event.srcElement.id ;
		e.dataTransfer.effectAllowed = "move";
    }    

    function drop(o,e){

        destElementId = event.srcElement.id;

        var dest = document.getElementById(destElementId).innerHTML ;

        document.getElementById(destElementId).innerHTML = dest + "<img src='youtube.png' />"      

        document.getElementById("Top").innerHTML =  "";
		
		o.style.borderColor = "gray";

    }    


	function dragenter(o,e){
		o.style.borderColor="blue";
		e.dataTransfer.dropEffect = "move";
	}
	function dragover(o,e){
		return false;
		o.style.borderColor="red";
	}
	
    </script>
	<style type="text/css">
		div.box{
			height:150px;
			margin:30px;
			border:4px solid black;
		}
	</style>

</head>

<body>
	<h1>Drag'n Drop for IE</h1>
	<h2>Drag image from Top box to Empty space in Bottom box.</h2>
	
	<div id="Top" class="box" ondragstart='return dragstart(this,event);' ondragover='return dragover(this,event);'>
		<img src="youtube.png" />
	</div>
	
	<div id="bottom" class="box" ondragenter='return dragenter(this,event);' ondragover='return dragover(this,event);' ondrop='return drop(this,event);'>

	</div>
	
	<div class="box" ondragenter="return dragenter(this,event)" ondragover="return dragover(this,event);" ondrop="return drop(this,event)">
		
	</div>
	
</body>

</html>
